<template>
  <div class="pagination">
    <button
      @click="myCurrentPage--"
      :disabled="myCurrentPage === 1"
      :class="{
        disabled: myCurrentPage === 1,
      }"
      v-if="totalPages > 1"
    >
      &lt;
    </button>
    <button
      :class="{
        active: myCurrentPage === 1,
      }"
      @click="myCurrentPage = 1"
      v-if="totalPages > 0"
    >
      1
    </button>
    <button v-if="startEnd.start > 2">...</button>
    <button
      v-for="item in startEnd.end - startEnd.start + 1"
      :key="item"
      :class="{
        active: myCurrentPage === item + startEnd.start - 1,
      }"
      @click="myCurrentPage = item + startEnd.start - 1"
    >
      {{ item + startEnd.start - 1 }}
    </button>
    <button v-if="startEnd.end < totalPages - 1">...</button>
    <button
      :class="{
        active: myCurrentPage === totalPages,
      }"
      @click="myCurrentPage = totalPages"
      v-if="totalPages > 1"
    >
      {{ totalPages }}
    </button>
    <button
      @click="myCurrentPage++"
      :disabled="myCurrentPage === totalPages"
      :class="{
        disabled: myCurrentPage === totalPages,
      }"
      v-if="totalPages > 1"
    >
      &gt;
    </button>
    <select v-model="myPageSize" class="button">
      <option
        v-for="page_size in pageSizes"
        :value="page_size"
        :key="page_size"
      >
        每页{{ page_size }}条
      </option>
    </select>
    <span class="button">总数:{{ total }}</span>
  </div>
</template>

<script>
export default {
  name: "Pagination",
  data() {
    return {
      myCurrentPage: this.currentPage,
      myPageSize: this.pageSize,
    };
  },
  props: {
    "current-page": {
      type: Number,
      default: 1,
    },
    "page-sizes": {
      type: Array,
      default: () => {
        return [5, 10, 15, 20];
      },
    },
    "page-size": {
      type: Number,
      default: 5,
    },
    total: {
      type: Number,
      default: 0,
    },
  },
  computed: {
    totalPages() {
      return Math.ceil(this.total / this.myPageSize);
    },
    startEnd() {
      if (this.totalPages <= 1) {
        return {
          start: 1,
          end: 0,
        };
      }
      if (this.totalPages <= 7) {
        return {
          start: 2,
          end: this.totalPages - 1,
        };
      }
      let start = this.myCurrentPage - 2;
      let end = this.myCurrentPage + 2;
      if (start < 2) {
        start = 2;
        end = start + 4;
      }
      if (end > this.totalPages - 1) {
        end = this.totalPages - 1;
        start = end - 4;
      }

      return {
        start,
        end,
      };
    },
  },
  watch: {
    myCurrentPage(newValue) {
      this.$emit("current-change", newValue);
    },
    myPageSize(newValue) {
      //判断如果总页数小于当前页数，那么就让当前页数为总页数也就是最后一位
      if (this.totalPages < this.myCurrentPage) {
        this.myCurrentPage = this.totalPages;
        //因为更改了当前页数，所以会触发它自己的请求，这里就return，不用发请求了
        return;
      }
      this.$emit("size-change", newValue);
    },
  },
};
</script>

<style lang="less" scoped>
.pagination {
  display: flex;
  button {
    margin: 0 10px;
    width: 30px;
    height: 30px;
    font-size: 16px;
    outline: none;
    border: none;
    &.active {
      background-color: green;
      color: #fff;
    }
    &.disabled {
      color: #c0c4cc;
      cursor: not-allowed;
    }
  }
  .button {
    display:block;
    width: 80px;
    height:30px;
    line-height:30px;
    text-align:center;
  }
}
</style>